<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入外部的文件,用的都是外部样式 -->
  <link rel="stylesheet" href="./base.css">
  <!-- 只能写少量的 10局以内, -->
  <style>
    /* 后代选择器 */
    ul li{
      /* 定位,模式和偏移组成 */
      position: relative;
      left: 0px;
      top: 0px;
      /* 块水平居中的方法，auto 自动的水平居中 */
      margin: 0px auto;
      width: 228px;
      height: 270px;
    }
    /* em 并没有占据空间,me覆盖住了img标签 */
    /* 没有占用空间 float,绝对定位,绝对定位,
    可以覆盖其他的标签,应该是跟随父类 */
    /* 子绝父相 */
    li em{
      position: absolute;
      /* 向下移动4px */
      top: 4px;
      right: -4px;
    }
    /* li img 后代选择器, 2 个图片都会受影响
    li>img 子类选择器,直接嵌套的就可以,
    多加一层的标签,就不可以了
    */
    li>img {
      /* 父类宽多少，就和父标签一样宽 */
      width: 100%;
    }
    li h4{
      margin-top: 25px;
      margin-left: 25px;
      margin-right: 20px;
      /* 字的粗细 */
      font-weight: 400;
      /* 页面的字体10,12,14,16,18 ,页面内不许奇数字*/
      font-size: 14px;
      color: #050505;
    }
    .info{      
      /* margin-top: 25px;
      margin-left: 25px;
      margin-right: 20px; */
      /* 写4个 上 右 下 左 */
      margin: 25px 20px 0px 25px;
      font-size: 12px;
      color: #999999;
    }
    .info span{
      color: #FF7C2D;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <!--  区分不同的图片 -->
      <em>
        <img src="./images/hot.png" alt="hot图片">
      </em>
      <img src="./images/pic.png" alt="博客系统实战">
      <!-- 标题标签,不能是h1,h1文档的开头,商品的log -->
      <h4>Think PHP 5.0 博客系统实战项目演练</h4>
      <div class="info"> <span>高级</span>.1125人学习 </div>
    </li>
  </ul>
</body>
</html>